<template>
	<view>
		<view class="u-flex u-row-between u-padding-20" style="background: #fff;">
			<navigator url="../city/index" hover-class="none" class="u-flex">
				<u-icon name="map-fill" color="#818DFF" size="36"></u-icon>
				<view style="font-size: 30rpx;margin-left: 10rpx;">{{city}}</view>
			</navigator>
			<view style="width: 500rpx;display: flex;justify-content:flex-end;">
				<u-search placeholder="查找线下门店" v-model="initial.parm.keyword" :animation="true" bg-color="#fff" border-color="#333"
					:action-style="{color:'#818DFF',}" @custom="Search" @search="Search"></u-search>

			</view>
		</view>

		<u-dropdown>
			<u-dropdown-item v-model="value1" :title="title1" :options="options1" @change="change1"></u-dropdown-item>
			<u-dropdown-item v-model="value2" :title="title2" :options="options2" @change="change2"></u-dropdown-item>
		</u-dropdown>


		<view v-for="(item,index) in list" :key="index" class="list u-flex shadow" @click="go(item)">
			<u-image :src="item.cover" width="200" height="200" border-radius="20"></u-image>
			<view class="u-padding-left-20 u-flex-2">
				<view class=" u-flex u-row-between ">
					<view class=" u-font-lg u-font-weight ">{{item.storeName}}</view>
					<view class=" u-font-sm " style="color: #818DFF;text-align: right;">{{item.distance}}</view>
				</view>

				<u-rate v-model="item.score" active-color="#FF5D39" size="24"></u-rate><text class="u-font-xs"
					style="color: #FF5D39;">{{item.score}}分</text>

				<view class="u-flex u-flex-wrap">
					<u-tag v-for="(item1,index1) in item.tabs" key="index1" class="u-margin-right-10 u-margin-top-10"
						:text="item1" mode="plain" size="mini" shape="circle" color="#818DFF" border-color="#818DFF"
						v-if="item1"></u-tag>
				</view>

				<view class="u-flex u-font-xs u-col-center " style="margin: 20rpx 0;">
					<u-icon name="clock-fill" color="#818DFF"></u-icon>
					<view class="u-line-1 u-font-xs u-margin-left-10">
						{{item.openTime}}营业
					</view>
				</view>
				<view class="u-flex u-col-center" >
					<u-icon name="map-fill" color="#818DFF"></u-icon>
					<view class="u-line-1 u-font-xs u-margin-left-10">
						{{item.address}}
					</view>
				</view>


			</view>



		</view>
<backTop></backTop>



		<u-loadmore :status="initial.status" />





	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';
	import dropdown from "../../components/dropdown.vue";
	import loader from '@/common/loadPage.js';
	import backTop from '../../components/backTop';
	export default {
		components: {
			dropdown,
			backTop,
		},
		mixins: [loader],
		data() {
			return {
				list: [],
				initial: {
					geturl: "/index/store",
					parm: {
						sort: "",
						store_classify_id: "",
						lat: "",
						lng: "",
						keyword: "",
						city:''
					},
					isPage: true
				},


				options1: [],
				options2: [{
					label: '距离优先',
					value: 'distance',
				}, {
					label: '评分优先',
					value: "score",
				}],
				value1: '',
				value2: '',
				title1: "分类",
				title2: "排序",

			}
		},

		computed: {
			...mapGetters(["location", "city"]),
			...mapState(["userAddress"])
		},
		onShow() {
			this.initial.parm.lat = this.location.lat;
			this.initial.parm.lng = this.location.lng;
			this.initial.parm.city = this.userAddress.city;
			
			
			this.getclass()
			this.getGoods()
		},

		methods: {
			
			go(item){
				uni.navigateTo({
					url:"./detail?id="+item.id
				})
			},
			
			Search(e){
				this.initial.parm.keyword = e;
				this.initial.page = 1;
				this.getGoods()
			},
			change1(e) {
				this.initial.parm.store_classify_id = e;
				this.initial.page = 1;
				this.getGoods()
			},
			change2(e) {
				this.initial.parm.sort = e;
				this.initial.page = 1;
				this.getGoods()
			},
			getclass() {
				this.$u.post('/index/storeClassify', {

				}).then(res => {
					res.forEach(item => {
						item.label = item.classifyName;
						item.value = item.id;
					})
					this.options1 = res;

				}).catch(err => {})
			}
		}
	}
</script>

<style>
	.list {
		padding: 30rpx;
		margin-bottom: 10rpx;
		background: #FFFFFF;
		width: 700rpx;
	}
</style>
